<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-04-10 13:44:29
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-04-25 15:25:18
 * @FilePath: \crm\pagesecharts\index\components2\card3.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="card">
    <view class="title u-flex u-flex-between">
      <view class="u-flex">
        <u--image
          :src="$z.imgsrc('jian3.png')"
          width="36rpx"
          height="36rpx"
        ></u--image>
        <view class="text">客户类型统计</view>
      </view>

      <!-- <u-icon name="arrow-right" size="12" color="#999999"></u-icon> -->
    </view>
    <view style="width: 100%; height: 520rpx">
      <l-echart ref="chartRef" @finished="init"></l-echart>
    </view>
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="text1">
          {{ item.label }}
        </view>
        <view class="text2">{{ item.value }}%</view>
      </view>
    </view>
  </view>
</template>
<script>
import * as echarts from "@/pagesecharts/lime-echart/static/echarts.min";
import lEchart from "@/pagesecharts/lime-echart/components/l-echart/l-echart.vue";
export default {
  components: {
    lEchart,
  },
  data() {
    return {
      list: [
        {
          label: "重要用户",
          value: "40",
        },
        {
          label: "普通用户",
          value: "30",
        },
        {
          label: "低价值用户",
          value: "20",
        },
        {
          label: "低价值用户",
          value: "10",
        },
      ],
      option: {
        color: ["#8D83F3", "#95DBFF", "#F59689", "#D7D7D7"],
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [20, "80%"],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 0,
              // 8
            },
            data: [
              {
                value: 40,
                name: "重要用户 40%",
              },
              {
                value: 30,
                name: "普通用户 30%",
              },
              {
                value: 20,
                name: "低价值客户 20%",
              },
              {
                value: 10,
                name: "低价值客户 10%",
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    async init() {
      const chart = await this.$refs.chartRef.init(echarts);
      chart.setOption(this.option);
    },
  },
};
</script>
<style lang="scss" scoped>
.card {
  margin: 14rpx 18rpx;
  background-color: #fff;
  border-radius: 8rpx;

  // padding: 0 24rpx;
  // padding-bottom: 16rpx;
  .title {
    font-size: 28rpx;
    font-weight: bold;
    height: 88rpx;
    padding: 0 24rpx;

    .text {
      padding-left: 12rpx;
      line-height: 1;
    }
  }

  .list {
    // display: flex;
    // flex-direction: column;
    // flex-wrap: wrap;
    // justify-content: space-between;
    padding: 0 24rpx;
    padding-bottom: 10rpx;
    display: flex;
    flex-direction: column;

    .item {
      background-color: #f7f8f8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18rpx;
      height: calc(33.5 * 2rpx);
      border-radius: 8rpx;
      padding: 0rpx 24rpx 0 46rpx;
      position: relative;

      &::before {
        content: "";
        width: 24rpx;
        height: 24rpx;
        background: linear-gradient(#493aed, #8d83f3);
        position: absolute;
        left: 12rpx;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 6rpx;
      }

      &:nth-child(2)::before {
        background: linear-gradient(#199edb, #95dbff);
      }

      &:nth-child(3)::before {
        background: linear-gradient(#f43e2d, #f59689);
      }

      &:nth-child(4)::before {
        background: linear-gradient(#b4b4b4, #d7d7d7);
      }

      .text1 {
        color: #171a1d;
        font-size: 24rpx;
        line-height: 1;
      }

      .text2 {
        color: #080d1f;
        font-size: 24rpx;
        font-weight: bold;
        line-height: 1;
      }
    }
  }
}
</style>
